<template>
   <div class="common-layout">    
    <el-text class="mx-1" type="primary">Mock 服务：{{ baseurl }}</el-text><br>
    <el-button type="primary" class="top-add" @click="addClick">新增</el-button>
    <el-table :data="tableData" style="width: 100%" :empty-text="emptytext">
      <el-table-column prop="api" label="API" />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="{ $index }">
          <el-button link type="primary" size="small" @click="modifyClick($index)">
            详情
          </el-button>  
          <el-button link type="primary" size="small" @click="deleteClick($index)">
            删除
          </el-button>          
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { ElMessage, ElMessageBox,ElLoading  } from 'element-plus'
export default {
    name: 'ApiListComponent',  
    mounted() {
      this.getData()
      this.getBaseUrl()
    },
    methods: {
      modifyClick(index) {
        let item = this.tableData[index]
        this.$router.push("/api-modify/" + item.id)
      },
      addClick() {
          this.$router.push("/api-add")
      },
      getData() {
        if (this.requesting) {
          return
        }
        this.requesting = true
        this.$http.get("/api/list").then((res)=>{
            var data = res.data.data
            var api_list = data.api_list
            var maplist = api_list.map(item=>({id:item.id,api:`${item.api} ${item.remark==null?"":"(" + item.remark + ")"}`}))
            this.tableData.push(...maplist)
            this.requesting = false
        },(error)=> {
            ElMessage({
                  type: 'error',
                  message: '获取列表失败 ' + error,
            })
        })
      },
      getBaseUrl() {               
        this.$http.get("/api/baseurl").then((res)=>{
            this.baseurl = res.data.data
        },(error)=> {
            ElMessage({
                  type: 'error',
                  message: '获取 baseurl 失败 ' + error,
            })
        })
      },
      deleteById(id,callback) {
        const loading = ElLoading.service({
          lock: true,
          text: '处理中',
          background: 'rgba(0, 0, 0, 0.7)',
        })
        this.$http.post("/api/list/delete", {
            id:id
        }).then((res)=>{
            
            var data = res.data
            var code = data.code
            if (code == 200) {
                // 删除成功
                callback(true)
            } else {
                // 删除失败
                callback(false, data.msg)
            }
            loading.close()
        })
      },  
      deleteClick(index) {
        console.log(index)
        let item = this.tableData[index]
        var name = item.api
        var id = item.id
        ElMessageBox.confirm(
          '确定要删除 ' + name + ' ?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
            .then(() => {
              this.deleteById(id, (success,error)=>{
                if (success) {                  
                  this.tableData.splice(index, 1)
                  ElMessage({
                    type: 'success',
                    message: '删除成功',
                  })
                } else {
                  ElMessage({
                    type: 'error',
                    message: '删除失败 ' + error,
                  })
                }
              })
            })
            .catch(() => {           
        })
      }
    },
    data() {
      var tableData = []
      var requesting = false
      var baseurl = ""
      return {
        tableData,
        requesting,
        emptytext:"当前列表为空",
        baseurl
      }
    }    
}
</script>
<style scoped>
.top-add {
  margin-top: 1rem;
}
</style>